<div class="breadcrumb">
    <li>
        <a href="category?id=<c:out value="${serieCategory.id}"/>">
            <c:out value="${serieCategory.name}"/>
        </a>
    </li>
    <li>
        <a href="serie?id=<c:out value="${selectedSerie.id}"/>">
            <c:out value="${selectedSerie.name}"/>
        </a>
    </li>
</div>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title"><c:out value="${selectedSerie.name}"/></h3>
    </div>
    <div class="panel-body">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Details</h3>
            </div>
            <div class="panel-body">
                <div class="thumbnail col-md-2" style="margin-bottom: 0px;">
                    <img src="<c:out value="${serieProducts[0].imgPath}"/>">
                </div>
                <div class="col-md-10">
                    Auteur : <c:out value="${selectedSerie.author}"/><br>
                    Genre : 
                    <c:forEach var="genre" items="${genres}">
                        <c:out value="${genre}"/>                 
                    </c:forEach><br>
                    Synopsis : <c:out value="${selectedSerie.description}"/><br>
                </div>
            </div>
        </div>
    </div>
    
    <div class="panel-body">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Volumes</h3>
            </div>
            <div class="panel-body">
                <table class="table table-striped">
                    
                <c:forEach var="product" items="${serieProducts}">
                    <tr>
                        <td>
                            <div class="thumbnail col-md-1" style="margin-bottom: 0px;">
                                <img src="<c:out value="${product.imgPath}"/>"/>
                            </div>
                            <div class="col-md-9">
                                <c:out value="${selectedSerie.name}"/><br>
                                Volume <c:out value="${product.volume}"/>
                            </div>
                            <div class="col-md-2 text-center">
                                Prix : <c:out value="${product.price}"/> &euro;<br>
                                
                                <form action="" method="post">
                                    <input type="hidden" name="idProduct" value="<c:out value="${product.id}"/>"/>
                                    <input type="hidden" name="idSerie" value="<c:out value="${selectedSerie.id}"/>"/>
                                    <button type="submit" class="btn btn-success">Add to cart</button>    
                                </form>
  
                            </div>
                        </td>    
                    </tr>
                </c:forEach>
                </table>
            </div>
        </div>
    </div>
    
    
</div>
